<template>
  <!-- 页面整体布局：上下两块，使用 flex 布局分配高度 -->
  <div class="calendar-page">
    <!-- 上半屏：日历组件，展示当月视图，可定制日期和月份渲染 -->
    <div class="calendar-half">
      <a-calendar v-model:value="selectedDate" @select="onSelect">
        <template #dateCellRender="{ current }">
          <template v-if="hasEventInWeek(current)">
            <ul class="events">
              <li
                v-for="item in getListData(current).slice(0, 2)"
                :key="item.content"
                class="event-item"
              >
                <!-- 使用 Ant Design Vue 的徽章组件展示待办事项 -->
                <a-badge v-if="item.content" :status="item.type" :text="item.content" />
                <div v-else class="event-placeholder"></div>
              </li>
            </ul>
          </template>
        </template>
        <template #monthCellRender="{ current }">
          <div v-if="getMonthData(current)" class="notes-month">
            <section>{{ getMonthData(current) }}</section>
            <span>例子</span>
          </div>
        </template>
      </a-calendar>
    </div>
    <!-- 下半屏：待办事项列表，按时间排序，并支持分页 -->
    <div class="manage-btn-wrapper">
      <a-button type="primary" @click="openModal">任务管理</a-button>
    </div>
    <div class="todo-list-half">
      <!-- Ant Design Vue 表格组件 -->
      <a-table
        :data-source="displayedTodos"
        :pagination="{ pageSize: 10 }"
        rowKey="id"
        style="overflow: hidden"
      >
      <!-- 其余列保持不变 -->
      <a-table-column title="计划开始时间" dataIndex="estimatedStartTime" key="estimatedStartTime" />
      <a-table-column title="计划结束时间" dataIndex="estimatedEndTime" key="estimatedEndTime" />
      <a-table-column title="项目名称" dataIndex="projectName" key="projectName" ellipsis="true"/>
      <a-table-column title="任务名称" dataIndex="taskName" key="taskName" />
      <a-table-column title="项目经理" dataIndex="projectManager" key="projectManager" />
      <a-table-column title="主要内容" dataIndex="content" key="content" ellipsis="true"/>
      <!-- 任务状态列：插槽渲染，显示文字 + 冲突图标 -->
      <a-table-column title="任务状态" key="type">
        <template #default="{ record }">
          <span>{{ record.type }}</span>
          <a-tooltip
            v-if="record.conflictSign"
            placement="top"
            title="该任务与其他任务有 ≥1 小时的时间冲突"
          >
            <ExclamationCircleOutlined
              two-tone-color="#faad14"
              style="margin-left:4px"
            />
          </a-tooltip>
        </template>
      </a-table-column>
      <a-table-column title="操作" key="action" width="120px">
        <template #default="{ record }">
          <!-- 编辑按钮 -->
          <a-button
            type="link"
            size="small"
            @click="onEdit(record)"
            style="margin-right: 8px"
          >
            编辑
          </a-button>
          <!-- 删除按钮 + 确认框 -->
          <a-popconfirm
            title="确定要删除此任务吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="onDelete(record.id)"
          >
            <template #default>
              <a-button type="link" size="small" danger>删除</a-button>
            </template>
          </a-popconfirm>
        </template>
      </a-table-column>
      </a-table>
    </div>
  </div>
  <!-- 任务管理的对话框 -->
  <TaskEditDialog
    :visible="modalVisible"
    :task="editingItem"
    @update:visible="modalVisible = $event"
    @save="handleSave"
  />
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import dayjs, { Dayjs } from 'dayjs'
// import type { TableColumnsType } from 'ant-design-vue'
import { useTodoStore } from '@/stores/todo'
import type { TodoItem } from '@/stores/todo'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import TaskEditDialog from './tools/TaskEditDialog.vue'
// 1.api
// import {fetchEmployees,fetchProjects,fetchTasks,ListItem} from '@/services/api'
// select格式
// interface Option {
//   label: string
//   value: string
// }

// const employeeOptions = ref<Option[]>([])
// const projectOptions = ref<Option[]>([])
// const taskOptions = ref<Option[]>([])
// // 2.获取数据
// onMounted(async () => {
//   try {
//     const [emps, projs, tasks] = await Promise.all([
//       fetchEmployees(),
//       fetchProjects(),
//       fetchTasks(),
//     ])
//     employeeOptions.value = emps.map((e) => ({ label: e.name, value: e.id }))
//     projectOptions.value = projs.map((p) => ({ label: p.name, value: p.id }))
//     taskOptions.value = tasks.map((t) => ({ label: t.name, value: t.id }))
//   } catch (err) {
//     console.error('加载下拉数据失败', err)
//   }
// })

// -------------------------------------------------------------------------------
onMounted(() => {
  todoStore.initTodos()
})
const todoStore = useTodoStore()

// 增删改查表单
const modalVisible = ref(false)

const editingItem = ref<TodoItem| null>(null)
// 打开对话框
const openModal = () => {
  editingItem.value = null
  modalVisible.value = true
}
// 下方表格区展示
// 打开编辑弹窗，自动带入数据
function onEdit(item: TodoItem) {
  editingItem.value = item
  modalVisible.value = true
}
// 删除任务
function onDelete(id: number) {
  todoStore.remove(id)
}

// 增改
const handleSave = (item: TodoItem) => {
  // ← 新增：冲突校验
  if (hasTimeConflict(item)) {
    Modal.warning({
      title: '时间冲突',
      content: '该人员在其他项目中已有与此任务预计或实际时间存在 ≥1 小时的冲突，请调整后再保存。',
    })
    item.conflictSign = true
  }
  // 修改调用
  if (todoStore.todos.some(t => t.id === item.id)) {
    todoStore.update(item)
  }else {
    todoStore.add(item)
  }
  modalVisible.value = false
}

// 选中日期，绑定到日历组件
const selectedDate = ref<Dayjs | undefined>(dayjs())
const showall = ref<boolean>(false)

const onSelect = (date: Dayjs) => {
  // 重复点击
  if (selectedDate.value?.isSame(date, 'day') && !showall.value) {
    showall.value = true
  } else {
    // 第一次点击
    selectedDate.value = date
    showall.value = false
  }
}

// 全部待办事项（静态示例数据，可以替换为 API 获取）
const allTodos = computed(() => todoStore.todos)

// 表格列定义，使用 Ant Design Vue TableColumnsType
// const columns: TableColumnsType<TodoItem> = [
//   { title: '实际开始时间', dataIndex: 'actualStartTime', key: 'actualStartTime' },
//   { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
//   { title: '任务名称', dataIndex: 'taskName', key: 'taskName' },
//   { title: '项目经理', dataIndex: 'projectManager', key: 'projectManager' },
//   { title: '内容', dataIndex: 'content', key: 'content' },
//   { title: '任务状态', dataIndex: 'type', key: 'type' },
// ]

// 计算属性：根据选中日期过滤待办列表；如果未选中日期，则显示全部
const displayedTodos = computed(() => {
  if (showall.value) {
    return allTodos.value
  }
  if (selectedDate.value) {
    const dateStr = selectedDate.value.format('YYYY-MM-DD')
    return allTodos.value
      .filter((item) => item.date === dateStr)
      .sort((a, b) => a.actualStartTime.localeCompare(b.actualStartTime))
  }

  return allTodos.value
})

/**
 * 获取某日的待办数据，用于日期格子下方的徽章展示
 * @param value Dayjs 对象
 * @returns 数组，每项包含 type 和 content
 */
const getListData = (value: Dayjs) => {
  const dateStr = value.format('YYYY-MM-DD')
  const maxLength = getMaxItemsInWeek(value) // 获取当前日期所在周的最大展示行数
  const rawlist = allTodos.value
    .filter((item) => item.date === dateStr) // 过滤出当前日期的待办事项
    .slice(0, maxLength) // 取前两条
    .map((item) => ({ type: item.type, content: item.content })) // 映射成需要的格式
  // 补足不足2条的情况
  const padded = [...rawlist]
  //
  while (
    padded.length < rawlist.length ||
    (padded.length < maxLength && rawlist.length < maxLength)
  ) {
    padded.push({ type: '', content: '' }) // 添加空白占位
  }
  return padded
}

/**
 * 获取当前日期所在周需要展示的最多行数（1或2）
 */
const getMaxItemsInWeek = (current: Dayjs): number => {
  const startOfWeek = current.startOf('week')
  let max = 0
  for (let i = 0; i < 7; i++) {
    const dateStr = startOfWeek.add(i, 'day').format('YYYY-MM-DD')
    // 计算当前日期的待办事项数量
    const count = allTodos.value.filter((todo) => todo.date === dateStr).length
    if (count > max) max = count
    if (max >= 2) return 2
  }
  return max // 0, 1, or 2
}

/**
 * 判断传入日期所在的一整周是否至少一天有事项
 */
const hasEventInWeek = (value: Dayjs) => {
  const start = value.startOf('week')
  return Array.from({ length: 7 }).some((_, i) =>
    allTodos.value.some((t) => t.date === start.add(i, 'day').format('YYYY-MM-DD')),
  )
}

/**
 * 获取某月的汇总数据，用于月份格子渲染（示例：固定返回 1394）
 * @param value Dayjs 对象
 * @returns 数量或 undefined
 */
const getMonthData = (value: Dayjs) => {
  const monthStr = value.format('YYYY-MM')
  const count = allTodos.value.filter((item) => item.date.startsWith(monthStr)).length
  return count > 0 ? count : undefined
}

// ← 新增：异常原因
const exceptionReason = ref('')
watch(selectedDate, () => {
  exceptionReason.value = ''
})

// 时间冲突检测
const hasTimeConflict = (newTask: TodoItem) => {
  console.log('hasTimeConflict', newTask.id, {
    newEStart: newTask.estimatedStartTime,
    newEEnd: newTask.estimatedEndTime,
    newAStart: newTask.actualStartTime,
    newAEnd: newTask.actualEndTime,
  })

  // 只针对项目经理和普通成员
  const persons = [newTask.projectManager, ...newTask.members]
  // 遍历所有人
  for (const person of persons) {
    const others = todoStore.todos.filter(
      (t) =>
        t.id !== newTask.id && // 排除自己
        t.projectName !== newTask.projectName && // 同一项目
        (t.projectManager === person || t.members.includes(person)), // 同一人
    )
    for (const other of others) {
      const newEStart = dayjs(newTask.estimatedStartTime, 'YYYY-MM-DD HH:mm')
      const newEEnd = dayjs(newTask.estimatedEndTime, 'YYYY-MM-DD HH:mm')
      const newAStart = dayjs(newTask.actualStartTime, 'YYYY-MM-DD HH:mm')
      const newAEnd = dayjs(newTask.actualEndTime, 'YYYY-MM-DD HH:mm')
      const otherEStart = dayjs(other.estimatedStartTime, 'YYYY-MM-DD HH:mm')
      const otherEEnd = dayjs(other.estimatedEndTime, 'YYYY-MM-DD HH:mm')
      const otherAStart = dayjs(other.actualStartTime, 'YYYY-MM-DD HH:mm')
      const otherAEnd = dayjs(other.actualEndTime, 'YYYY-MM-DD HH:mm')
      // 时间检查
      const overlap = (s1: dayjs.Dayjs, e1: dayjs.Dayjs, s2: dayjs.Dayjs, e2: dayjs.Dayjs) => {
        if (e1.isAfter(s2) && e2.isAfter(s1)) {
          const startMax = s1.isAfter(s2) ? s1 : s2
          const endMin = e1.isBefore(e2) ? e1 : e2
          return endMin.diff(startMax, 'hour', true) >= 1
        }
        return false
      }
      if (
        overlap(newEStart, newEEnd, otherEStart, otherEEnd) ||
        overlap(newAStart, newAEnd, otherAStart, otherAEnd)
      ) {
        return true
      }
    }
  }
  return false
}
</script>
<style scoped lang="less">
/* 页面整体上下结构 */
.calendar-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.calendar-half {
  flex: 1;
  overflow: auto;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.todo-list-half {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

// /* 日历格子结构样式控制 */

// .ant-picker-content .ant-picker-body table {
//   table-layout: fixed; /* 固定列宽，防止内容撑开 */
//   width: 100%;
// }

// .ant-picker-cell {
//   border-top: 1px solid #1a1313;
//   padding: 0;
// }

// .ant-picker-cell-inner {
//   display: flex;
//   flex-direction: column;
//   justify-content: flex-start;
//   height: 100%;
//   overflow: hidden;
//   padding: 4px;
//   box-sizing: border-box;
// }

/* 限制事件最多展示2条 */
.events {
  list-style: none;
  margin: 0;
  padding: 0;
  :deep(.ant-badge-status) {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    font-size: 12px;
  }
  /* 强制 Badge 文本不换行且不撑宽 */
  :deep(.ant-badge-status-text, .ant-badge-text) {
    // display: inline-block;
    max-width: 100%;
    // overflow: hidden;
    // white-space: nowrap;
    // text-overflow: ellipsis;
    font-size: 12px;
  }
}

// /* 每条事件项样式 */
// .event-item {
//   font-size: 12px;
//   height: 20px;
//   line-height: 20px;
//   white-space: nowrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   width: 100%; /* 让文本宽度撑满，避免换行 */
//   max-width: 100%; /* 限制最大宽度 */
// }

// .event-placeholder {
//   height: 18px;
//   visibility: hidden; /* 占位但不显示 */
// }

.notes-month {
  text-align: center;
  font-size: 28px;
  #section {
    font-size: 28px;
  }
}
// 按钮
.manage-btn-wrapper {
  padding: 16px;
  text-align: right;
}
// 填充表单
.todo-form,
.manage-form {
  margin-bottom: 16px;
}
.manage-table {
  max-height: 300px;
  overflow: auto;
}
.ant-modal {
  width: 1200px;
}

// 二次确认按钮
</style>
